<template>
  <div class="tui-jian animation-opacity">
    <RotationChart />
    <div class="to">
      <div class="titl">
        <p class="titl_one">全国优秀航空院校推荐</p>
        <p class="titl_two">进名校，学空乘，圆大学梦，圆蓝天梦</p>
      </div>
      <LoadingComponent v-slot="{loadingFlag}" class="daxue" v-for="it in AllyeDates" :key="it.category_id">
        <div class="daxue_img">
          <img :src="'http://www.shxw114.com:9527/' + it.product_logo" v-if="loadingFlag" />
        </div>
        <div class="daxue_title">
          <div class="el-icon-title">
            {{ it.product_name }}
            <i class="el-icon-apple">
              <svg
                class="icon"
                style="
                  width: 1em;
                  height: 1em;
                  vertical-align: middle;
                  fill: currentColor;
                  overflow: hidden;
                "
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2490"
              >
                <path
                  d="M540.48 289.74l19.07-1.16c2.56-0.15 63.11-4.32 98.33-50 34.5-44.76 28.33-112.91 28-115.79l-1.76-18.1h-18.18c-2.24 0-55.3 0.52-94 38.26-18.28 17.83-29.43 45.09-33.16 81a246.71 246.71 0 0 0-0.39 46.75z m59.45-118.13c14.58-14.22 32.76-20.93 46.37-24.09-0.9 19-5 47.06-20.1 66.64-13.5 17.5-33.6 26.23-48.65 30.51 0.58-23.78 5.34-56.43 22.38-73.06zM782.67 347.09c-70.07-51.95-166.35-35.36-230.06-24.39-10.61 1.83-20.43 3.52-29 4.7-5.14-52.86-29.2-100.38-70.38-138.47-34.82-32.21-69.69-46.37-71.16-47l-14.85 37.14c0.29 0.11 29.41 11.94 58.85 39.17 33.17 30.68 52.37 67.21 57.3 108.83-7.25-1-15.37-2.33-24-3.74-64.75-10.47-162.6-26.33-231.7 29.5-21.8 17.63-39.09 41.31-51.37 70.37-13.12 31-20.89 69.19-23.1 113.38-3.28 65.63 6 127 27.6 182.43A376.23 376.23 0 0 0 259 842.42c31.28 32.89 61.79 52.9 81.88 63.9 25.67 14.06 49.25 21.8 66.37 21.8 25.72 0 44.12-3.88 60.35-7.31 14.49-3 27-5.69 43.66-5.69 15.89 0 26.89 2.46 39.63 5.32 16.08 3.6 34.3 7.68 64.38 7.68 24.71 0 49.88-7.19 74.82-21.37 22.76-13 44.82-31.44 65.58-55C792 810.6 822.69 755.28 842.08 696c20.76-63.49 27.86-128.13 20.51-186.92-9.4-75.08-36.29-129.64-79.92-161.99z m21.39 336.5c-17.73 54.19-45.58 104.53-78.43 141.74-35.74 40.49-75 62.79-110.41 62.79-25.66 0-40.9-3.41-55.64-6.72-13.79-3.09-28.06-6.28-48.37-6.28-20.84 0-36.64 3.33-51.91 6.55-15.72 3.32-30.56 6.45-52.1 6.45-17.29 0-70-21.49-119.27-73.27-47.07-49.47-101.71-137.56-94.78-276.27C196.83 465 216.91 413 252.82 383.94c24-19.37 55.37-29.46 96-30.83 36.49-1.24 74 4.86 104.1 9.75 20.49 3.33 38.19 6.2 51.75 6.2 14.38 0 33.06-3.21 54.69-6.94 60.4-10.4 143.13-24.65 199.44 17.1 34.52 25.59 56.07 70.95 64.06 134.84 6.66 52.94 0.14 111.6-18.8 169.53z"
                  p-id="2491"
                ></path>
              </svg>
            </i>
          </div>
          <p>{{ it.product_money }}</p>
          <div class="marg">
            <span
              class="el-icon-star-on i"
              v-for="i in 4"
              :key="i"
              style="margin-right: 0.2rem"
            >
              <svg
                class="icon"
                style="
                  width: 1em;
                  height: 1em;
                  vertical-align: middle;
                  fill: currentColor;
                  overflow: hidden;
                "
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3121"
              >
                <path
                  d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z"
                  fill="#F2CB51"
                  p-id="3122"
                ></path>
              </svg>
            </span>

            <a href="##" class="marg-a">
              <button>参观学校</button>
            </a>
            <a href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb" class="marg-a marg-aa">
              <button>立即报名</button>
            </a>
          </div>
        </div>
      </LoadingComponent>
      <LoadingComponent v-slot="{loadingFlag}" class="status_con">
        <img src="/img/报名条件.7c214866.jpg" v-if="loadingFlag" />
      </LoadingComponent>
      <LoadingComponent v-slot="{loadingFlag}" class="ent">
        <img src="/img/报名流程.960607ac.jpg" v-if="loadingFlag" />
      </LoadingComponent>
    </div>
    <MsBm />
    <ImportantNotices />
    <InquiryHk />
    <FooTer />
  </div>
</template>
<script setup>
import RotationChart from "../../components/RotationChart/index.vue";
import ImportantNotices from "../../components/ImportantNotices/index.vue";
import FooTer from "../../components/Footer/index.vue";
import MsBm from "../../components/MsBm/index.vue";
import InquiryHk from "../../pages/inquiryHk/index.vue";
import { AllyeGet } from "../../server/index.js";
import { ref } from "vue";
const AllyeDates = ref({});
(async (v) => {
  const { data } = await AllyeGet();
  AllyeDates.value = data;
})();
</script>
<style scoped>
.tui-jian {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.to {
  width: 14.5rem;
  height: auto;
  margin: 0 auto;
}
.titl {
  width: 100%;
  height: 2.5rem;
}
.titl_one {
  width: 100%;
  line-height: 1rem;
  font-size: 0.6rem;
  text-align: center;
  color: #666;
}
.titl_two {
  width: 100%;
  line-height: 1.2rem;
  font-size: 0.6rem;
  color: #f90;
  text-align: center;
  margin-top: 0.2rem;
}
.daxue {
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.001rem solid #ccc;
}
.daxue > .daxue_img {
  width: 5rem;
  height: 3.5rem;
  border-radius: 0.4rem;
  overflow: hidden;
}
.daxue_img img {
  width: 100%;
  height: 100%;
}
.daxue_title {
  width: 9.2rem;
  height: 100%;
}
.el-icon-title {
  width: 100%;
  font-size: 0.8rem;
  color: #666;
}
.daxue_title > p {
  width: 100%;
  font-size: 0.5rem;
  margin-bottom: 0.4rem;
  color: #666;
}
.marg-a {
  width: 3rem;
  height: 1.2rem;
  border-radius: 0.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #36a7f9;
  margin-right: 0.2rem;
}
.marg-a button {
  display: block;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 0.4rem;
}
.marg-aa {
  background-color: #f90;
}
.marg {
  display: flex;
}
.marg span svg {
  width: 0.8rem !important;
  height: 0.8rem !important;
}
</style>
